<template>
  <a-modal
    title="新增船舶工作记录"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <!--      经 Form.create() 包装过的组件会自带 this.form 属性，如果使用 template 语法，可以使用-->
      <a-form :form="form">
        <a-row :gutter="12">
          <a-col :md="12" :sm="24">
            <a-form-item
              label="单位名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                v-decorator="['companyName', {rules: [
                  { required: true, message: '请输入单位名称', trigger: 'blur' },
                  { type: 'string', min: 1, message: '单位名称不能为空', trigger: 'blur' }]}]" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              label="业务员人数"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                v-decorator="['peopleNumber',{rules: [
                  {required: true, message: '请输入业务员人数', trigger: 'blur'},
                  { type: 'string',trigger: 'blur' }]}]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="12" :sm="24">
            <a-form-item
              label="联系方式"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input v-decorator="['phone', {rules: [{required: true, message: '请输入联系方式', trigger: 'blur'}]}]" />
            </a-form-item>
          </a-col>
<!--          <a-col :md="12" :sm="24">-->
<!--            <a-form-item-->
<!--              label="船只选择"-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--            >-->
<!--              <a-input v-decorator="['shipCountry', {rules: [{required: true, message: '请输入船舶国籍', trigger: 'blur'}]}]" />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
          <a-col :md="12" :sm="24">
            <a-form-item
              label="船号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select v-decorator="['shipName',{ rules: [{ required: true, message: '' }] },]"
                        placeholder="选择船名"
                        style="width: 180px" >

                <a-select-option v-for="ship in ships" :key="ship.shipId" :value="ship.shipName">
                  {{ ship.shipName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="12" :sm="24">
            <a-form-item
              label="工作类型"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select v-decorator="['workType',{ rules: [{ required: true, message: '' }] },]"
                        placeholder="选择工作类型"
                        style="width: 180px" >
                <a-select-option value="1">
                  油污水
                </a-select-option>
                <a-select-option value="2">
                 废旧货物
                </a-select-option>
                <a-select-option value="3">
                  航修
                </a-select-option>
                <a-select-option value="4">
                  接待
                </a-select-option>
                <a-select-option value="5">
                  供货
                </a-select-option>

                <a-select-option value="6">
                  供油
                </a-select-option>
                <a-select-option value="7">
                  其他
                </a-select-option>
                <a-select-option value="8">
                  垃圾回收
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              label="工作详情"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input v-decorator="['workDetail', {rules: [{required: false, message: '工作详情', trigger: 'blur'}]}]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="12" :sm="24">
            <a-form-item
              label="上轮时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-date-picker @change="onDeclareChange"
                             @ok="getDelareValue"
                             :show-time="{ format: 'HH:mm' }"
                             format="YYYY/MM/DD HH:mm"
                             v-decorator="['upTime']" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              label="下轮时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-date-picker @change="onChange"
                             @ok="getDataValue"
                             :show-time="{ format: 'HH:mm' }"
                             format="YYYY/MM/DD HH:mm"
                             v-decorator="['downTime']" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>

  </a-modal>
</template>

<script>
  import { addWork } from '@/api/ship/work'
  import moment from 'moment'
  // import { queryShipInPort } from '@/api/ship/ship'
  export default {
    props: {
      ships: {}
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this)
      }
    },
    created() {
    },
    methods: {
      add () {
        this.visible = true
      },
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (values.upTime !== undefined) {
            values.upTime = moment(values.upTime).format('YYYY/MM/DD HH:mm:ss')
          }
          if (values.downTime !== undefined) {
            values.downTime = moment(values.downTime).format('YYYY/MM/DD HH:mm:ss')
          }

          // console.log(values)
          if (!errors) {
            addWork(values).then(() => {
              this.visible = false
              this.confirmLoading = false
              this.form.resetFields()
              this.$emit('ok')
            }).catch(err => {
              this.confirmLoading = false
              this.$message.error(err.result || '添加失败')
            })
          } else {
            this.confirmLoading = false
          }
        })
      },

      handleCancel () {
        this.form.resetFields()
        this.visible = false
      },
      onDeclareChange (date, dateString) {
        const data = this.$moment(date).format('YYYY/MM/DD HH:mm:ss')
        // console.log(data1)
        this.declareTime = data
      },
      onChange (date, dateString) {
        const data1 = this.$moment(date).format('YYYY/MM/DD HH:mm:ss')
        // console.log(data1)
        this.berthingTime = data1
      },
      getDataValue (value) {
        value = moment(value).format('YYYY-MM-DD HH:mm:ss') // 转换
      },
      getDelareValue (value) {
        value = moment(value).format('YYYY-MM-DD HH:mm:ss')
      }
    }
  }
</script>
